<template>
  <view class="franchise-container">
    <!-- 导航栏 -->
    <nav-bar backUrl="/pages/collaboration/collaboration" :isTabbar="true"></nav-bar>
    <!-- 加盟优势 -->
    <view class="section advantages">
      <view class="section-title">
        <text class="main">加盟优势</text>
        <text class="sub">ADVANTAGES</text>
      </view>
      <view class="advantage-grid">
        <view class="advantage-item" v-for="(item, index) in advantages" :key="index">
          <image :src="item.icon" mode="aspectFit"></image>
          <text class="title">{{item.title}}</text>
          <text class="desc">{{item.desc}}</text>
        </view>
      </view>
    </view>

    <!-- 加盟流程 -->
    <!-- <view class="section process">
      <view class="section-title">
        <text class="main">加盟流程</text>
        <text class="sub">PROCESS</text>
      </view>
      <view class="process-steps">
        <view class="step-item" v-for="(step, index) in steps" :key="index">
          <view class="step-number">{{index + 1}}</view>
          <text class="step-title">{{step.title}}</text>
          <text class="step-desc">{{step.desc}}</text>
        </view>
      </view>
    </view> -->

    <!-- 加盟条件 -->
    <view class="section requirements">
      <view class="section-title">
        <text class="main">加盟条件</text>
        <text class="sub">REQUIREMENTS</text>
      </view>
      <view class="req-list">
        <view class="req-item" v-for="(req, index) in requirements" :key="index">
          <text class="dot">•</text>
          <text class="content">{{req}}</text>
        </view>
      </view>
    </view>

    <!-- 立即加盟按钮 -->
    <view class="apply-btn" @tap="handleApply">
      <text>立即加盟</text>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
	components: {
		NavBar
	},
  data() {
    return {
      advantages: [
        {
          icon: '/static/collaborate/01.png',
          title: '品牌优势',
          desc: '成熟品牌体系，市场认可度高'
        },
        {
          icon: '/static/collaborate/02.png',
          title: '扶持政策',
          desc: '专业运营指导，全方位扶持'
        },
        {
          icon: '/static/collaborate/03.png',
          title: '盈利模式',
          desc: '多元化收入，利润空间大'
        },
        {
          icon: '/static/collaborate/04.png',
          title: '培训体系',
          desc: '系统化培训，快速上手'
        }
      ],
      steps: [
        {
          title: '提交申请',
          desc: '填写加盟申请表'
        },
        {
          title: '资质审核',
          desc: '考察评估资质'
        },
        {
          title: '签订合同',
          desc: '确认合作细节'
        },
        {
          title: '开业筹备',
          desc: '培训指导开业'
        }
      ],
      requirements: [
        '具有合法经营资质和独立承担民事责任的能力',
        '认同品牌理念，具有良好的商业信誉',
        '具备相应的投资实力和风险承受能力',
        '有充足的时间和精力投入到店铺经营中',
        '具有基本的经营管理经验或美容相关行业经验'
      ]
    }
  },
  methods: {
    handleApply() {
      uni.navigateTo({
        url: '/pages/franchise-apply/franchise-apply',
        fail: (err) => {
          console.error('Navigation failed:', err)
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.franchise-container {
  min-height: 100vh;
  background: #F8F8F8;
  padding-bottom: 120rpx;

  .banner {
    position: relative;
    height: 400rpx;
    overflow: hidden;

    image {
      width: 100%;
      height: 100%;
    }

    .banner-text {
      position: absolute;
      left: 40rpx;
      bottom: 40rpx;
      color: #FFFFFF;

      .title {
        font-size: 48rpx;
        font-weight: bold;
        display: block;
        margin-bottom: 10rpx;
      }

      .subtitle {
        font-size: 28rpx;
        opacity: 0.9;
      }
    }
  }

  .section {
    margin: 40rpx 30rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    padding: 30rpx;

    .section-title {
      text-align: center;
      margin-bottom: 40rpx;

      .main {
        font-size: 36rpx;
        font-weight: bold;
        color: #333333;
        display: block;
      }

      .sub {
        font-size: 24rpx;
        color: #999999;
        margin-top: 8rpx;
        display: block;
      }
    }
  }

  .advantage-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30rpx;

    .advantage-item {
      background: #F8F8F8;
      border-radius: 12rpx;
      padding: 30rpx;
      text-align: center;

      image {
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 20rpx;
      }

      .title {
        font-size: 28rpx;
        color: #333333;
        font-weight: 500;
        margin-bottom: 10rpx;
        display: block;
      }

      .desc {
        font-size: 24rpx;
        color: #666666;
        line-height: 1.4;
      }
    }
  }

  .process-steps {
    display: flex;
    flex-direction: column;
    gap: 30rpx;

    .step-item {
      display: flex;
      align-items: flex-start;
      padding: 20rpx;
      background: #F8F8F8;
      border-radius: 12rpx;

      .step-number {
        width: 40rpx;
        height: 40rpx;
        background: #2B87FF;
        color: #FFFFFF;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        margin-right: 20rpx;
        flex-shrink: 0;
      }

      .step-title {
        font-size: 28rpx;
        color: #333333;
        font-weight: 500;
        margin-bottom: 8rpx;
        display: block;
      }

      .step-desc {
        font-size: 24rpx;
        color: #666666;
      }
    }
  }

  .req-list {
    .req-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20rpx;

      .dot {
        margin-right: 10rpx;
        color: #2B87FF;
        font-size: 32rpx;
        line-height: 1;
      }

      .content {
        flex: 1;
        font-size: 28rpx;
        color: #333333;
        line-height: 1.5;
      }
    }
  }

  .apply-btn {
    position: fixed;
    bottom: 40rpx;
    left: 30rpx;
    right: 30rpx;
    height: 88rpx;
    background: #2B87FF;
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    text {
      color: #FFFFFF;
      font-size: 32rpx;
      font-weight: 500;
    }

    &:active {
      opacity: 0.9;
    }
  }
}
</style> 